<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form{
            margin: 100px auto;
            width: 600px;
        }
    </style>
</head>
<body>
    <!-- 
         // var reg=/^\w{4,16}$/;                                        用户名格式
        //var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;       邮箱格式
        // var reg=/^\d{17}[A-z|0-9]{1}$/;                              身份证格式
     -->

    <form action="">
        <label for="phoneNum"><span> 手机号码:</span><input type="text" name="" id="phoneNum"><span>请输入11位手机号码</span></label><br>
        <label for="username"><span> 用户名:</span><input type="text" name="" id="username"><span>请输入6-18位用户名</span></label><br>
        <label for="username"><span> 邮箱地址:</span><input type="text" name="" id="email"><span>请输入邮箱地址</span></label><br>
        <label for="username"><span> 身份证号:</span><input type="text" name="" id="userId"><span>请输入身份证号</span></label><br>
        <label for="username"><span> 密码:</span><input type="text" name="" id="passwd"><span>请输入密码</span></label><br>
        <textarea name="" id="text" cols="30" rows="10"></textarea>
        
    </form>

    <script>
        function check(id,reg,msg)
        {
            var phoneNum=document.querySelector(id)
            phoneNum.onkeyup=function()
            {
                var val=this.value
                // var reg=/^1[3456789]\d{9}$/
                if(reg.test(val))
                {
                    this.nextElementSibling.innerText='√'
                    this.nextElementSibling.style.color='green'
                }else{
                    this.nextElementSibling.innerText=msg
                    this.nextElementSibling.style.color='red'
                }
            }
        }
        window.onload=function()
        {
            check('#phoneNum',/^1[3456789]\d{9}$/,'请输入11位手机号码')
            check('#username',/^\w{6,18}$/,'请输入6-18位用户名，大小写英文字符数子及下划线')
            check('#email',/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/,'请输入正确格式的邮箱地址')
            //邮箱： xxx@qq.com 域名  后缀:com cn xyz org  gov  edu
            //  /^\w{1,18}@[z-a0-9\-]{1,20}\.(com|cn|xyz|org|gov|edu)/i   (i为或略大小写,\为转义符,|为或)

            check('#userId',/^\d{17}[0-9a-zA-Z]{1}$/,'请输入正确的身份证号码')

            var pwd=/\w{6,18}/   //是[0-9a-zA-Z_]
            var passwd=document.querySelector("#passwd")
            var onlyNum=/^\d{6,18}$/  //全是数字
            var onlya=/^[a-z]{6,18}$/   //全是小写字母
            var onlyA=/^[A-Z]{6,18}$/    //全是大写字母
            passwd.onkeyup=function()
            {
                var passVal=this.value
                if(onlyNum.test(passVal)||onlyA.test(passVal)||onlya.test(passVal))
                {
                    this.nextElementSibling.innerText='不能全是数子或字母'
                    this.nextElementSibling.style.color='red'
                }else if(pwd.test(passVal))
                {
                    this.nextElementSibling.innerText='√正确'
                    this.nextElementSibling.style.color='green'
                }else{
                    this.nextElementSibling.innerText='错误×'
                    this.nextElementSibling.style.color='red'
                }
            }
            var text=document.querySelector("#text")
            var wordList=/激情|TMD|tmd|卧槽|牛逼|谢咩蒙/
            text.onkeyup=function()
            {
                var v=this.value.replace(wordList,'**') //替换
                this.value=v
            }

        }
    </script>
    
</body>
</html>